<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        hero--{{hero}}
        <!-- 文本绑定字符串 -->
        <input type="text" v-model="hero" />
        <hr />
        title--{{title}}
        <!-- 文本域绑定字符串 -->
        <textarea v-model="title"></textarea>
        <hr />
        isRemember--{{isRemember}}
        <div>
            用户名：<input v-model='uname' />
            <!-- 单个 checkbox 绑定布尔值 -->
            <input type="checkbox" v-model="isRemember" />记住用户名
            <button @click="login">登录</button>
        </div>
        <hr />
        <!-- 多个 checkbox 绑定数组 -->
        game--{{game}}
        <div>
            <h2>游戏
                <input type="checkbox" v-model="game" value="kings" />王者荣耀
                <input type="checkbox" v-model="game" value="lol" />英雄联盟
                <input type="checkbox" v-model="game" value="dota" />刀塔
                <input type="checkbox" v-model="game" value="chicken" />吃鸡
            </h2>
        </div>
        <hr />
        <!-- 单选框绑定字符串 -->
        address--{{address}}
        <div>
            <h2>住址</h2>
            <input type="radio" v-model="address" value="zz" />郑州
            <input type="radio" v-model="address" value="kf" />开封
            <input type="radio" v-model="address" value="ly" />洛阳
        </div>
    </div>
</body>
<script>
    // 双向数据绑定主要解决用户交互问题，因此只用于表单

    let vm = new Vue({
        el: '#app',
        data: {
            hero: '剑圣',
            title: "新闻",
            uname: localStorage.getItem("uname"),
            isRemember: true,
            game: ["lol", "dota"],
            address: "zz"
        },
        methods: {
            login() {
                if (this.isRemember) {
                    localStorage.setItem("uname", this.uname);
                } else {
                    console.log(333);
                    localStorage.removeItem("uname");
                }
            }
        }
    });
</script>

</html>